<!--
 * @Author: g05047
 * @Date: 2021-06-03 15:30:58
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2021-07-19 14:00:14
 * @Description: file content
-->
<template>
  <a-modal :title="(type===0?'新增':'编辑')+'缴纳主体'" :visible="visible" :width="480" :dialog-style="{ top: '200px' }" @ok="handleOk" @cancel="handleCancel">
    <a-form-model ref="modal" :model="formState" :rules="formRules" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
      <a-form-model-item label="个税缴纳主体" prop="majorName">
        <a-input style="width:320px" v-model="formState.majorName" placeholder="请输入个税缴纳主体名称" allow-clear />
      </a-form-model-item>
      <a-form-model-item label="报税区域" prop="area">
        <Vcity style="width:320px" ref="vcity" :before="formState.area" :citydata="cityData" @selectDepCityFn="selectDepCity" />
      </a-form-model-item>
      <a-form-model-item label="登录账号" prop="account">
        <a-input style="width:320px" v-model="formState.account" placeholder="请输入登录账号" allow-clear />
      </a-form-model-item>
      <a-form-model-item label="登录密码" prop="password">
        <a-input-password style="width:320px" v-model="formState.password" placeholder="请输入登录密码" allow-clear />
      </a-form-model-item>
      <a-form-model-item label="负责财务" prop="creator">
        <a-select style="width:320px" show-search :value="formState.creator" placeholder="请选择人员" @search="onSearchUser" @change="onChangeUser">
          <a-select-option v-for="item in memberList" :key="item.realName + ',' + item.id">{{ item.realName }} ----- {{ item.postName }}</a-select-option>
        </a-select>
      </a-form-model-item>
    </a-form-model>
  </a-modal>
</template>

<script>
import Vcity from '@/components/vcity/index';
import { getProjectCity } from '@/services/project';
import { getSearchUser } from '@/services/project';
export default {
  name: 'createPayPrincipal',
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    type: Number
  },
  components: { Vcity },
  watch: {
    visible: {
      handler (val) {
        if (!val) {
          this.$refs.modal.resetFields();
          this.formState.area = '';
          this.$refs.vcity.address = ''
        }
      }
    }
  },
  data () {
    return {
      formState: {
        majorName: '',
        area: '',
        account: '',
        password: '',
        creator: undefined,
      },
      formRules: {
        majorName: [
          {
            required: true,
            message: '个税缴纳主体名称不允许为空!',
            trigger: 'blur',
          },
        ],
        area: [
          {
            required: true,
            message: '报税区域不允许为空!',
            trigger: 'change',
          },
        ],
        account: [
          {
            required: true,
            message: '登录账号不允许为空!',
            trigger: 'blur',
          },
        ],
        password: [
          {
            required: true,
            message: '登录密码不允许为空!',
            trigger: 'blur',
          },
        ],
        creator: [
          {
            required: true,
            message: '负责财务不允许为空!',
            trigger: 'change',
          },
        ],
      },
      memberList: [],
      cityData: []
    };
  },
  created () {
    this.getProjectCity();
  },
  methods: {
    handleOk () {
      this.$refs.modal.validate(valid => {
        if (valid) {
          this.$emit('cancelModal', {
            success: 'ok',
            data: this.formState,
          });
        } else {
          return false;
        }
      });
    },
    handleCancel () {
      // this.$refs.modal.resetFields();
      // this.formState.area = '';
      this.$emit('cancelModal', {
        success: 'cancel',
      });
    },
    onClearModal () {
      this.$refs.modal.resetFields();
      this.formState.area = '';
    },
    onSearchUser (value) {
      if (value.length >= 2) {
        this.getSearchUser({ realName: value });
      }
    },
    onChangeUser (value) {
      const arr = value.split(',');
      this.formState.creator = arr[0]
    },
    selectDepCity (data) {
      this.formState.area = data.name
    },
    /**
     * @description: 搜索系统人员
     * @param {*}
     * @return {*}
     */
    getSearchUser (params) {
      getSearchUser(params).then(res => {
        let { code, data, msg } = res.data;
        if (code == 200) {
          this.memberList = data;
        } else {
          this.$message.error(msg);
        }
      });
    },
    /**
     * @description: 获取所有城市
     * @param {*}
     * @return {*}
     */
    getProjectCity () {
      getProjectCity().then(res => {
        let { code, data, msg } = res.data;
        if (code == 200) {
          this.cityData = data;
        } else {
          this.$message.error(msg);
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
/deep/ .ant-form-item-children .address_div {
  height: 30px !important;
  line-height: 30px !important;
}
</style>
